<template>
  <el-table
      ref="multipleTable"
      :data="newList"
      tooltip-effect="dark"
      style="width: 100%"
  >
    <el-table-column type="selection" width="55"></el-table-column>
    
    <el-table-column label="Order_No" min-width="100">
      <template #default="scope">
        {{ scope.row.orderNoStr }}
      </template>
    </el-table-column>
    
    <el-table-column label="状态" width="100" align="center">
      <template #default="scope">
        <el-tag :type="scope.row.statusStr">
          {{ scope.row.statusStr }}
        </el-tag>
      </template>
    </el-table-column>
  
    <el-table-column label="Price" min-width="100" align="center">
      <template #default="scope">
        ¥{{ scope.row.price }}
      </template>
    </el-table-column>
    
    <el-table-column prop="name" label="姓名"></el-table-column>
    
    <el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>
    
    <el-table-column label="日期">
      <template #default="scope">{{ scope.row.date }}</template>
    </el-table-column>
    
  </el-table>

</template>

<script>

import {
  ref,
  reactive,
  computed,
  toRefs,
  onBeforeMount,
} from "vue";

export default {
  name : 'TransactionTable',
  setup() {
    const list = ref( [] );
    
    const set = reactive({
      newList: computed(() => {
        const statusMap = {
          success: 'success',
          pending: 'danger'
        }
        if ( list.value && list.value.length > 0 ) {
          list.value = list.value.map( item => {
            return ( {
              ...item,
              orderNoStr : item.order_no.substring(0, 30),
              statusStr : statusMap[item.status]
            } )
          } )
        } else {
          list.value = []
        }
        return list.value
      })
    });
  
    onBeforeMount(() => {
      fetchData()
    });
    
    const fetchData = () => {
      list.value =  [
        {
          date: '2017-05-13',
          name: '招财',
          status: 'success',
          price: '9527',
          order_no: '123456789123456789',
          address: '上海市浦东新区洲海路 920 弄'
        },
        {
          date: '2018-05-23',
          name: '进宝',
          status: 'pending',
          price: '6666',
          order_no: '123456789123456781',
          address: '上海市浦东新区洲海路 920 弄'
        },
        {
          date: '2019-05-12',
          name: '张三',
          status: 'pending',
          price: '8888',
          order_no: '89897898562554545',
          address: '上海市浦东新区洲海路 920 弄'
        },
        {
          date: '2020-05-14',
          name: '李四',
          status: 'pending',
          price: '9528',
          order_no: '56125578785125',
          address: '上海市浦东新区洲海路 920 弄'
        },
        {
          date: '2021-05-22',
          name: '王五',
          status: 'pending',
          price: '0',
          order_no: '32659898775888',
          address: '上海市浦东新区洲海路 920 弄'
        }
      ]
    }
    
    return {
      ...toRefs(set),
      list,
      fetchData,
    };
  }
}
</script>
